import 'package:flutter/material.dart';
import 'package:full_display/common/qxp_color.dart';
import 'package:full_display/page/help/help_provider.dart';
import 'package:full_display/page/help/help_word_widget.dart';
import 'package:full_display/page/medium/local_media_widget.dart';
import 'package:full_display/unit/asset_utils/asset_utils.dart';
import 'package:full_display/unit/screen/screen_utility.dart';
import 'package:full_display/unit/toast/toast_util.dart';
import 'package:full_display/unit/widgets/widget_global/tabbar_custom_bg.dart';
import 'package:provider/provider.dart';

class HelpWidget extends StatelessWidget {
  const HelpWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [ChangeNotifierProvider(create: (_) => HelpProvider())],
      child: const HelpPage(),
    );
  }
}

class HelpPage extends StatefulWidget {
  const HelpPage({super.key});

  @override
  State<HelpPage> createState() => _HelpPageState();
}

class _HelpPageState extends State<HelpPage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  var tabViewList = ['帮助文档', '帮助视频'];
  var tabViewPageList = [
    const HelpWordWidget(),
    LocalMediaWidget(
      type: 'help',
    )
  ];

  @override
  void initState() {
    _tabController = TabController(length: tabViewPageList.length, vsync: this);

    super.initState();
  }

  var indexPage = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Container(margin: EdgeInsets.only(left: 15.0.W), width: 20.0.W),
            Center(
              child: Container(
                margin: EdgeInsets.only(top: 48.0.H),
                alignment: Alignment.center,
                width: 200.0.W,
                height: 36.0.H,
                child: Stack(
                  children: [
                    CustomPaint(
                      size: Size(200.0.W, 36.0.H),
                      painter: TabBarCustomBg(),
                    ),
                    TabBar(
                        labelColor: ColorPlate.white,
                        unselectedLabelColor: ColorPlate.blue,
                        indicatorColor: ColorPlate.transparent,
                        indicator: const BoxDecoration(
                            gradient: LinearGradient(
                                begin: Alignment.topCenter,
                                end: Alignment.bottomCenter,
                                colors: [
                                  ColorPlate.tabbar_select,
                                  ColorPlate.tabbar_gradient
                                ]),
                            borderRadius:
                                BorderRadius.all(Radius.circular(20))),
                        labelPadding: EdgeInsets.zero,
                        indicatorPadding: EdgeInsets.zero,
                        controller: _tabController,
                        onTap: (index) {
                          setState(() {
                            indexPage = index;
                          });
                        },
                        tabs: tabViewList
                            .map((e) => Container(
                                  alignment: Alignment.center,
                                  height: 36.0.H,
                                  width: 100.0.W,
                                  child: Text(e),
                                ))
                            .toList())
                  ],
                ),
              ),
            ),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () {
                showToast('msg');
              },
              child: Container(
                margin: EdgeInsets.only(top: 48.0.H, right: 15.0.W),
                width: 20.0.W,
                height: 20.0.H,
                child: Image.asset(AssetUtils.getAssetImage('icon_edit_group')),
              ),
            )
          ],
        ),
        Expanded(
            child: IndexedStack(
          index: indexPage,
          children: tabViewPageList,
        ))
      ],
    );
  }
}
